<template>
  <div class="book-box">
    <!-- 结构分为 网站说明、登录、注册======登录时需要图片认证 -->
    <div class="book-login-form">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="你的昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="你的性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="从事岗位" prop="job">
          <el-radio-group v-model="ruleForm.job">
            <el-radio label="前端"></el-radio>
            <el-radio label="后端"></el-radio>
            <el-radio label="全栈"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作年限" prop="workAge">
          <el-input v-model="ruleForm.workAge"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- <button @click="btn">验证</button> -->
    <!-- 引入子组件 -->
    <!-- <page-slide ref="child"></page-slide> -->
  </div>
</template>
<style scoped>
.book-box{
  width: 100%;
  height: 100vh;
  background-color: pink;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.book-login-form{
  width: 300px;
  background-color: rgb(223, 217, 217);
  padding: 10px;
  border: 1px solid red;
}
</style>
<script>
import slideVerify from "@/common/slideVerify.vue";
export default {
  data() {
    return {
      ruleForm: {
          nickname: '',
          gender: '',
          job: '',
          workAge:''
        },
         rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          
        }
    };
  },
  // 组件
  components: {
    //引入子组件，子组件命名
    "page-slide": slideVerify,
  },
  // 方法区
  methods: {
    btn() {
      //$refs获取在子组件的属性和方法，子组件需定义ref，child就是在子组件中定义的ref
      this.$refs.child.outerVisible = true;
    },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
};
</script>